<p>
     The Grid widget displays tabular data and offers rich support interacting with data,
     including paging, sorting, grouping, and selection. Grid is a powerful widget with
     many configuration options. It can be bound to local JSON data or to remote data
     using the Kendo DataSource component.
 </p>
 <h3>Getting Started</h3>
 There are two primary ways to create a Kendo Grid:

 <ol>
     <li>From an existing HTML table element, defining columns, rows, and data in HTML</li>
     <li>From an HTML div element, defining columns and rows with configuration, and binding to data</li>
 </ol><div class="code-sample"><h4 class="code-title">Creating a <b>Grid</b> from existing HTML Table element</h4><pre class="code prettyprint"><code> &lt;!-- Define the HTML table, with rows, columns, and data --&gt;
 &lt;table id="grid"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th data-field="title"&gt;Title&lt;/th&gt;
          &lt;th data-field="year"&gt;Year&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Star Wars: A New Hope&lt;/td&gt;
          &lt;td&gt;1977&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Star Wars: The Empire Strikes Back&lt;/td&gt;
          &lt;td&gt;1980&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
 &lt;/table&gt;</code></pre></div><div class="code-sample"><h4 class="code-title">Initialize the Kendo Grid</h4><pre class="code prettyprint"><code>  $(document).ready(function(){
      $("#grid").kendoGrid();
  });</code></pre></div><div class="code-sample"><h4 class="code-title">Creating a <b>Grid</b> from existing HTML Div element</h4><pre class="code prettyprint"><code> &lt;!-- Define the HTML div that will hold the Grid --&gt;
 &lt;div id="grid"&gt;
 &lt;/div&gt;</code></pre></div><div class="code-sample"><h4 class="code-title">Initialize the Kendo Grid and configure columns & data binding</h4><pre class="code prettyprint"><code>   $(document).ready(function(){
      $("#grid").kendoGrid({
          columns:[
              {
                  field: "FirstName",
                  title: "First Name"
              },
              {
                  field: "LastName",
                  title: "Last Name"
          }],
          dataSource: {
              data: [
                  {
                      FirstName: "Joe",
                      LastName: "Smith"
                  },
                  {
                      FirstName: "Jane",
                      LastName: "Smith"
              }]
          }
      });
  });</code></pre></div><h3>Configuring Grid Behavior</h3>
 Kendo Grid supports paging, sorting, grouping, and scrolling. Configuring any of
 these Grid behaviors is done using simple boolean configuration options. For
 example, the follow snippet shows how to enable all of these behaviors.<div class="code-sample"><h4 class="code-title">Enabling Grid paging, sorting, grouping, and scrolling</h4><pre class="code prettyprint"><code>   $(document).ready(function(){
      $("#grid").kendoGrid({
         groupable: true,
         scrollable: true,
         sortable: true,
         pageable: true
      });
  });</code></pre></div>By default, paging, grouping, and sorting are <strong>disabled</strong>. Scrolling is enabled by default.

 <h3>Performance with Virtual Scrolling</h3>
 When binding to large data sets or when using large page sizes, reducing active in-memory
 DOM objects is important for performance. Kendo Grid provides built-in UI virtualization
 for highly optimized binding to large data sets. Enabling UI virtualization is done via simple configuration.<div class="code-sample"><h4 class="code-title">Enabling Grid UI virtualization</h4><pre class="code prettyprint"><code>   $(document).ready(function(){
      $("#grid").kendoGrid({
         scrollable: {
             virtual: true
         }
      });
  });</code></pre></div><h3>Accessing an Existing Grid</h3>
<p>
 You can reference an existing <b>Grid</b> instance via
 <a href="http://api.jquery.com/jQuery.data/">jQuery.data()</a>.
 Once a reference has been established, you can use the API to control
 its behavior.
</p><div class="code-sample"><h4 class="code-title">Accessing an existing Grid instance</h4><pre class="code prettyprint"><code>var grid = $("#grid").data("kendoGrid");</code></pre></div>
